<script setup lang="ts">
import {ref,reactive,computed,watch,watchEffect} from 'vue';
    const search = ref("");
    const arrData = ref([{name:"1"},{name:"2"},{name:"13"},{name:"4"}]);

    const allName = computed(()=>{
        return arrData.value.filter((item)=>item.name.includes(search.value))
    });

    const stopWatch = watch(search,(newSearch,prevSearch)=>{
        console.log("监听了",newSearch,prevSearch)
    })

    const stopEffect = watchEffect(()=>{
        console.log("Effect监听了",search.value)
    });

    const handleClick = ()=>{
        stopWatch();
        stopEffect();
    }
</script>

<template>
    <input type="text" v-model="search">
    <button @click="handleClick">停止监听</button>
</template>

<style scoped>

</style>
